<template>
    <el-table :height="650" :data="ProductList" style="width: 100%" border stripe highlight-current-row>
        <el-table-column v-for="column in columns" :key="column.field_name" :prop="column.field_name"
            :label="column.comment" align="center">
            <!-- 特殊字段格式处理 -->
            <!-- <template v-if="['data_date'].includes(column.field_name)" #default="{ row }">
                {{ formatDate(row[column.field_name]) }}
            </template>
            <template v-else-if="['sale_price', 'return_amount', 'sales_amount'].includes(column.field_name)"
                #default="{ row }">
                {{ formatCurrency(row[column.field_name]) }}
            </template> -->
        </el-table-column>
    </el-table>
</template>

<script>
export default {

    props: {
        ProductList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            j: [{
                "createBy": null,
                "createTime": null,
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "id": null,
                "item": "TK25079",
                "picUrl": null,
                "firstLevelColumn": "下装",
                "secondLevelColumn": "紧身长裤",
                "threeLevelColumn": "紧身长裤",
                "operationLevel": null,
                "brand": null,
                "newTime": "2023-09-06",
                "operationMainProducts": "",
                "salePrice": 209.0,
                "productSeason": null,
                "proGender": null
            },
            {
                "createBy": null,
                "createTime": null,
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "id": null,
                "item": "TW75084",
                "picUrl": "/profile/upload/2023/07/25/image_20230725160724A014.png",
                "firstLevelColumn": "文胸",
                "secondLevelColumn": "运动文胸",
                "threeLevelColumn": "背心文胸",
                "operationLevel": null,
                "brand": null,
                "newTime": "2023-09-06",
                "operationMainProducts": "",
                "salePrice": 209.0,
                "productSeason": null,
                "proGender": null
            },],
            // 表格列配置（根据提供的数据结构生成）
            columns: [
                { field_name: 'item', comment: 'item' },
                { field_name: 'firstLevelColumn', comment: '一级' },
                { field_name: 'secondLevelColumn', comment: '二级' },
                { field_name: 'threeLevelColumn', comment: '三级' },

                // { field_name: 'id', comment: 'id', sortable: true },
                { field_name: 'brand', comment: '品牌' },
                { field_name: 'newTime', comment: '上新时间', sortable: true },
                { field_name: 'operationMainProducts', comment: '是否主推' },
                { field_name: 'productSeason', comment: '季节' },
                { field_name: 'salePrice', comment: '单价' },
                { field_name: 'operationLevel', comment: '运营层级' },
                // { field_name: 'channel', comment: '渠道' },
                // { field_name: 'shop_name', comment: '店铺名称' },
                // { field_name: 'shop_id', comment: '店铺id', sortable: true },

                // { field_name: 'category1', comment: '品类1' },
                // { field_name: 'category2', comment: '品类2' },

                // { field_name: 'sales_number', comment: '销售件数', sortable: true },
                // { field_name: 'return_number', comment: '退货件数', sortable: true },
                // { field_name: 'visitors', comment: '商品访客数', sortable: true },
                // { field_name: 'pay_buyers', comment: '支付买家数', sortable: true },
                // { field_name: 'sale_price', comment: '销售价格', sortable: true },
                // { field_name: 'pro_gender', comment: '商品性别' },

                // { field_name: 'return_amount', comment: '退款金额', sortable: true },

                // { field_name: 'sales_amount', comment: '销售金额', sortable: true }
            ],

            // 示例数据
            tableData: [
                // 你的数据对象数组，字段需与 field_name 对应
                // 示例：
                // {
                //   id: 1,
                //   brand: '示例品牌',
                //   data_date: '2023-09-15',
                //   sale_price: 199.99,
                //   // ...
                // }
            ]
        }
    },
    methods: {
        formatDate(date) {
            // 使用 day.js 或 moment 进行日期格式化
            return date ? dayjs(date).format('YYYY-MM-DD') : '-'
        },
        formatCurrency(value) {
            // 金额格式化
            return value ? `¥${Number(value).toFixed(2)}` : '-'
        }
    }
}
</script>

<style scoped>
.el-table {
    margin: 20px 0;
}
</style>